<template>
  <div class="crm-page home-page">
    <div class="page-header">联系人</div>
    <!-- <div class="page-card pd10">
      <el-row class="page-search" :gutter="10">
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">  <el-input v-model="queryParam.searchName" placeholder="请输入姓名或客户名" /></el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">  <el-button type="primary" @click="handleSearch">搜索</el-button></el-col>
      </el-row>
    </div> -->
    <div class="page-content">
      <el-row class="table-btns" :gutter="20">
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-button size="small" @click="handleAdd">新建</el-button>
          <el-button size="small" @click="handleTransfer">转移</el-button>
        </el-col>
        <el-col class="align-right" :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
          <el-select v-model="queryParam.status" style="width:150px;margin-right:10px" @change="handleSearch">
            <el-option label="全部联系人" value="1" />
            <el-option label="我的联系人" value="2" />
            <!-- <el-option label="最近已查看" value="3" /> -->
          </el-select>
          <el-input v-model="queryParam.searchName" style="width:200px;margin-right:10px" placeholder="请输入姓名或客户名" />
          <el-button type="primary" @click="handleSearch">搜索</el-button>

        </el-col>
      </el-row>
      <BaseTable
        ref="table"
        :load-data="loadData"
        show-selection
      >
        <el-table-column
          label="姓名"
          prop="name"
        >
          <template slot-scope="{row}">
            <a class="table-link" @click="gotoDetail(row)">{{ row.name }}</a>
          </template>
        </el-table-column>
        <el-table-column
          label="客户名"
          prop="customerName"
        >
          <template slot-scope="{row}">
            <a class="table-link" @click="gotoCustomerDetail(row)">{{ row.customerName }}</a>
          </template>
        </el-table-column>
        <el-table-column
          label="职务"
          prop="position"
        />
        <el-table-column
          label="电话"
          prop="phone"
        />
        <el-table-column
          label="所有人"
          prop="owner"
        />
        <el-table-column
          label="创建日期"
          prop="createTime"
          width="200"
        >
          <template slot-scope="{row}">
            {{ formatTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column
          label="创建人"
          prop="createName"
        />
        <el-table-column
          label="操作"
          fixed="right"
          width="200"
          class-name="table-opt-col"
        >
          <template slot-scope="{row}">
            <el-button type="text" @click="handleUpdate(row)">编辑</el-button>
          </template>
        </el-table-column>
      </BaseTable>
    </div>
    <AddDialog v-if="visible" :visible="visible" :data="curData" @close="closeDialog" />
    <Transfer :visible="visibleTransfer" :data="curData" @close="closeDialog" />
  </div>
</template>
<script>
import AddDialog from './add.vue'
import Transfer from './transfer'
import { getContactList, getContact } from '@/api/contact'
import { getEnumText } from '@/utils/enums'
import { formatTime } from '@/utils/tools'
export default {
  name: 'Contacts',
  components: { AddDialog, Transfer },
  data() {
    return {
      urlParamsAbled: true,
      visible: false,
      visibleTransfer: false,
      curData: {},
      queryParam: {
        status: '1',
        searchName: ''
      }
    }
  },
  mounted() {
    //
    const open = this.$route.query.open
    this.$nextTick(() => {
      if (open) {
        this.curData.customerId = this.$route.query.customerId
        this.curData.customerName = this.$route.query.customerName
        this.visible = true
      }
    })
  },
  methods: {
    getEnumText,
    formatTime,
    handleSearch() {
      this.urlParamsAbled = false
      this.$refs.table.refresh(true)
    },
    loadData(params) {
      const Params = this.urlParamsAbled ? this.getURLParams() : false
      const queryParam = {
        // customerId: this.$route.query.customerId || '',
        searchName: this.queryParam.searchName.trim()
      }
      if (this.queryParam.status === '1') {
        queryParam.owner = ''
      } else if (this.queryParam.status === '2') {
        queryParam.owner = this.USER.userName
      }
      if (Params) {
        if (Params.customerId) {
          queryParam.customerId = Params.customerId
        }
        if (Params && Params.searchTimeFlag) {
          queryParam.searchTimeFlag = Params.searchTimeFlag
        }
      }

      return getContactList(Object.assign(params, queryParam)).then((res) => {
        // console.log('rrrrrr:', res)
        return res
      })
    },
    closeDialog(v) {
      this.visible = false
      this.visibleTransfer = false
      if (v) {
        this.$refs.table.refresh()
      }
    },
    changeStatus() {
      this.$refs.table.refresh(true)
    },
    handleAdd() {
      this.curData = {}
      this.visible = true
    },
    handleUpdate(row) {
      getContact({ id: row.id }).then(res => {
        this.curData = res
        this.visible = true
      }).catch((ex) => {
        this.$message({
          type: 'error',
          message: ex.message || '获取数据失败'
        })
      })
    },
    gotoDetail(row) {
      this.gotoMainPage('contacts/info', { id: row.id })
      // this.$router.push({ path: '/contacts/info', query: { id: row.id }})
    },
    gotoCustomerDetail(row) {
      this.gotoMainPage('customer/info', { id: row.customerId })

      // this.$router.push({ path: '/customer/info', query: { id: row.customerId }})
    },
    handleTransfer(row) {
      console.log('this.$refs.table.multipleSelection:', this.$refs.table.multipleSelection)
      if (this.$refs.table.multipleSelection && this.$refs.table.multipleSelection.length <= 0) {
        this.$message.warning('请选择联系人')
        return
      }
      if (this.$refs.table.multipleSelection && this.$refs.table.multipleSelection.length > 1) {
        this.$message.warning('只能选择一个联系人')
        return
      }
      this.curData = this.$refs.table.multipleSelection[0]
      this.visibleTransfer = true
    }
  }
}
</script>
